<template>
  <view v-if="type === 1">
    <view
      v-if="isShow"
      style="
        z-index: 9999;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      "
    >
      <view style="position: relative; width: 90%; max-width: 415px">
        <image
          style="width: 100%"
          :src="material.content_image_url"
          @click="handleConfirm"
          alt=""
        />
        <view
          v-if="material.cancel_button_image_url"
          style="
            position: absolute;
            bottom: 5%;
            left: 50%;
            transform: translate(-50%);
            width: 90%;
            display: flex;
            align-items: center;
            justify-content: space-around;
          "
        >
          <image
            v-if="material.cancel_button_image_url"
            :src="material.cancel_button_image_url"
            style="width: 35%; height: 50px"
            alt=""
            mode="aspectFit"
            @click="isShow = false"
          />
          <image
            v-if="material.confirm_button_image_url"
            :src="material.confirm_button_image_url"
            style="width: 35%; height: 50px"
            alt=""
            mode="aspectFit"
            @click="handleConfirm"
          />
        </view>
        <view
          v-else
          style="
            position: absolute;
            bottom: 5%;
            left: 50%;
            transform: translate(-50%);
            width: 90%;
            display: flex;
            align-items: center;
            justify-content: space-around;
          "
        >
          <image
            v-if="material.confirm_button_image_url"
            :src="material.confirm_button_image_url"
            style="width: 70%; height: 50px"
            alt=""
            @click="handleConfirm"
          />
        </view>
      </view>
      <image
        src="https://static.wi-fi.cn/omc/202207/fb8bff3c272d494efe8c4971e15909f884bd3d48.png"
        style="width: 15px; height: 15px; margin-top: 30px"
        @click="isShow = false"
      />
    </view>
  </view>
  <view v-else-if="type === 2">
    <view
      v-if="isShow"
      style="
        z-index: 9999;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      "
    >
      <view
        style="
          position: relative;
          width: 90%;
          max-width: 415px;
          background-color: #ffffff;
          border-radius: 8px;
          padding: 10px;
        "
      >
        <view style="font-size: 20px; line-height: 50px; font-weight: bold; text-align: center; color: #ff7900">
          温馨提示
        </view>
        <view
          style="padding: 0 10px 80px; font-size: 17px; line-height: 30px; text-align: center"
          v-html="material.content_text"
        >
          {{ material.content_text }}
        </view>
        <view
          v-if="material.cancel_button_text"
          style="
            position: absolute;
            bottom: 10%;
            left: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
          "
        >
          <view
            style="
              border-radius: 50px;
              background-color: #ff7900;
              width: 120px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              color: #ffffff;
            "
            @click="isShow = false"
          >
            {{ material.cancel_button_text }}
          </view>
          <view
            style="
              font-size: 18px;
              border-radius: 50px;
              background-color: #ff7900;
              width: 120px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              color: #ffffff;
            "
            @click="handleConfirm"
          >
            {{ material.confirm_button_text }}
          </view>
        </view>
        <view
          v-else
          style="
            position: absolute;
            bottom: 10%;
            left: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
          "
        >
          <view
            style="
              font-size: 18px;
              border-radius: 50px;
              background-color: #ff7900;
              width: 120px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              color: #ffffff;
            "
            @click="handleConfirm"
          >
            {{ material.confirm_button_text }}
          </view>
        </view>
      </view>
      <image
        src="https://static.wi-fi.cn/omc/202207/fb8bff3c272d494efe8c4971e15909f884bd3d48.png"
        style="width: 15px; height: 15px; margin-top: 30px"
        @click="isShow = false"
      />
    </view>
  </view>
  <view v-else>
    <view
      v-if="isShow"
      style="
        z-index: 9999;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      "
    >
      <view
        style="
          background-color: rgba(0, 0, 0, 0.8);
          border-radius: 8px;
          padding: 10px 30px;
          color: #ffffff;
          max-width: 80%;
        "
        v-html="material.content_text"
      >
        {{ material.content_text }}
      </view>
    </view>
  </view>
</template>

<script>
import { init, setObjectParam, sleep, navigateToURL,sendLog } from './source.js';
export default {
  props: {
    param: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      isShow: false,
      paramInfo: null,
      type: 1,
      url: '',
      click_id: '',
      material: {
        content_image_url: '',
        confirm_button_image_url: '',
        cancel_button_image_url: '',
        confirm_button_text: '',
        cancel_button_text: '',
        content_text: '',
        auto_redirect: 1,
        auto_redirect_ms: 2000
      }
    };
  },
  async created() {},
  methods: {
    async initExpose(param) {
      this.paramInfo = param || this.param
      sendLog({
        method: 'initExposeInit',
        apiParam: JSON.stringify(this.paramInfo || '')
      })
      const res = await init(this.paramInfo);
      this.$emit('getAdInfo', res);
      if (res.creative_type && !Array.isArray(res)) {
        this.click_id = res.click_id;
        this.isShow = true;
        this.type = res.creative_type;
        this.url = res.url;
        if (res.material) {
          setObjectParam(res.material, this.material);
          if (this.material.auto_redirect === 1) {
            if (this.material.auto_redirect_ms === 1) {
              this.handleConfirm();
            } else {
              await sleep(this.material.auto_redirect_ms);
              this.handleConfirm();
            }
          }
          if (this.type === 5){
            this.handleConfirm();
          }
        }
      }
    },
    async handleConfirm() {
      const prefix = this.paramInfo.web_view_path || '/pages/web-view/web-view';
      navigateToURL({
        web_view_path: prefix,
        xcxPlatform: this.paramInfo.xcx_platform || '',
        url: this.url,
        click_id: this.click_id
      })
      this.isShow = false;
    }
  },
  onLoad(res) {}
};
</script>

<style></style>
